<!--车辆管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">家政服务项管理</span>
    <el-button @click="beforeService" type="primary" style="float:right;margin-top:13px;">新建服务项</el-button>
  </div>
  <!-- 新增服务弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="服务名称">
            <el-input placeholder="请输入内容" v-model="saveServiceForm.service_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务描述">
            <el-input placeholder="请输入内容" v-model="saveServiceForm.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="服务价格">
            <el-input placeholder="请输入内容" v-model="saveServiceForm.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务类别">
            <el-input placeholder="请输入内容" v-model="saveServiceForm.category"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveService">确定</el-button>
    </template>
  </el-dialog>
  <!-- 服务搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="服务名称">
        <el-input placeholder="请输入内容" style="width:220px;" v-model="searchServiceForm.service_name"></el-input>
      </el-form-item>
      <el-form-item label="服务类别" style="width:290px;">
        <el-input placeholder="请输入内容" style="width:220px;" v-model="searchServiceForm.category"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadService">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 服务列表 -->
  <el-card style="margin:20px;" >
    <el-table :data="ServiceArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="service_name" label="服务名称" align="center"/>
      <el-table-column prop="description" label="服务描述" align="center"/>
      <el-table-column prop="price" label="服务价格" align="center"/>
      <el-table-column prop="category" label="服务类别" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editService(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteService(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增服务');

/*因为在main.js里面定义了全局方法9.来加载code对应的所有字典项*/
//定义数组用来保存车辆类型字典项数据
const vehicleTypeArr = ref([]);
//定义数组用来保存电池类型字典项数据
const batteryTypeArr = ref([]);


//定义对象用来保存车辆的查询条件
const searchServiceForm = ref({
  sercive_name: '',
  category: ''
})
//定义数组来保存服务列表数据
const ServiceArr = ref([]);
//定义加载车辆的方法
const loadService = () => {
  let data=qs.stringify(searchVehicleForm.value);
  axios.get(BASE_URL+'/v1/vehicle/select?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('查询成功')
          vehicleArr.value = response.data.data;
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
//一进到页面立即加载全部车辆
/*onMounted(()=>{
  loadVehicle();
})*/
//定义重置搜索的方法
const resetSearch = () => {
  searchVehicleForm.value = {};
  loadVehicle();
}

//对车辆状态列的显示文字进行转换  cellValue-单元格
const vehicleStatusFormatter = (row, column, cellValue, index) => {
  if (cellValue==1){
    cellValue='空闲'
  }else if (cellValue==2){
    cellValue='占用'
  }
  return cellValue;
}
//对车辆类型列的显示文字进行转换
const vehicleTypeFormatter = (row, column, cellValue, index) => {
  // !vehicleTypeArr.value判断是否为空数组--
  //              --vehicleTypeArr.value这是判断vehicleTypeArr.value是否为非空数组
  if (!vehicleTypeArr.value){
    return cellValue;//如果为空数组,直接返回cellValue,这里是车辆的类型值,如10
  }
  //如果不为空 遍历字典项数组,如果当前单元格值等于字典项的value值,则将单元格值替换为字典项的label值
  for (let item of vehicleTypeArr.value){
    if (item.value==cellValue){
      cellValue=item.label;
    }
  }
  return cellValue;//将转换后的文字返回
}
//对电池类型列的显示文字进行转换
const batteryTypeFormatter = (row, column, cellValue, index) => {
  if (!batteryTypeArr.value){
    return cellValue;
  }
  for (let item of batteryTypeArr.value){
    if (item.value==cellValue){
      cellValue=item.label;
    }
  }
  return cellValue;
}

//点击'新建车辆'按钮:显示弹窗并设置标题
const beforeService = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新建服务';
}

//定义一个对象用来保存车辆弹窗表单数据
const saveServiceForm = ref({
  service_name: '',
  description: '',
  price: '',
  category: '',
});
//定义保存服务的方法
const saveService = () => {
  let data=qs.stringify(saveVehicleForm.value);
  axios.post(BASE_URL+'/v1/vehicle/save?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('保存成功')
          //保存成功后,需要清空表单数据,关掉弹窗
          saveVehicleForm.value = {};
          dialogVisible.value = false;
          loadVehicle();
        }else {
          //数据库里的code和licence设置唯一约束,如果插入了重复数据,会返回错误信息
          ElMessage.error('车辆的识别码与车牌号不允许重复')
        }
      })
}
//定义处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('您确定要关闭弹窗吗？')) {
  dialogVisible.value = false;
  saveVehicleForm.value = {};
 }
}
//定义编辑服务的方法
const  editService = (id) => {
  //1.修改弹窗标题并让弹窗出现
  dialogTitle.value = '编辑车辆';
  dialogVisible.value = true;
  //2.给后端发送请求,获取当前车辆的详细信息
  axios.get(BASE_URL+'/v1/vehicle/select?id='+id).then((response)=>{
    if (response.data.code==2000){
      //3.将获取到的数据赋值给表单对象
      saveVehicleForm.value = response.data.data[0];
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}
//定义删除车辆的方法
const deleteService = (id) => {
  if (confirm('您确定要删除当前车辆吗？')) {
    axios.post(BASE_URL+'/v1/vehicle/delete/'+id).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success('删除成功')
        loadVehicle();
      }else {
        ElMessage.error(response.data.msg)
      }
    })
  }
}
</script>